<div class="modal" ng-controller="SaveDecisionTableCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <form name="decisionTableForm">
        <div class="modal-header"><h2>{{'DECISION-TABLE.POPUP.SAVE-DECISION-TABLE-TITLE' | translate}}</h2></div>
        <div class="modal-body">
          <p>{{'DECISION-TABLE.POPUP.SAVE-DESCRIPTION' | translate}}</p>
          <div class="alert error" ng-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0"
               style="font-size: 14px; margin-top:20px">
            <div class="popup-error" style="font-size: 14px">
              <span class="glyphicon glyphicon-remove-circle"></span>
              <span>{{saveDialog.errorMessage}}</span>
            </div>
          </div>
          <div class="form-group" ng-class="{'has-error': decisionTableForm.name.$invalid}">
            <label for="decisiontableName">{{'DECISION-TABLE.NAME' | translate}}</label>
            <input auto-focus class="form-control" editor-input-check id="decisiontableName" maxlength="400"
                   name="name" ng-disabled="model.loading" ng-model="saveDialog.name" ng-required="true" type="text">
          </div>
          <div class="form-group" ng-class="{'has-error': decisionTableForm.key.$invalid}">
            <label for="decisiontableKey">{{'DECISION-TABLE.KEY' | translate}}</label>
            <input class="form-control" data-ng-trim="false" editor-input-check id="decisiontableKey" maxlength="255"
                   name="key"
                   ng-disabled="model.loading" ng-model="saveDialog.key" ng-pattern="keyFieldPattern" ng-required="true"
                   spaceless-value type="text">
          </div>
          <div class="form-group">
            <label for="decisiontableDescription">{{'DECISION-TABLE.DESCRIPTION' | translate}}</label>
            <textarea class="form-control" id="decisiontableDescription" ng-disabled="model.loading"
                      ng-model="saveDialog.description"
                      rows="5"></textarea>
          </div>
          <div class="checkbox" ng-show="!error && !error.isConflict">
            <label>
              <input ng-disabled="status.loading" ng-model="saveDialog.newVersion" type="checkbox">
              {{'MODEL.SAVE.NEWVERSION' | translate}}
            </label>
          </div>
          <div class="form-group" ng-if="saveDialog.newVersion">
            <label for="commentTextArea">{{'MODEL.SAVE.COMMENT' | translate}}</label>
            <textarea class="form-control" id="commentTextArea" ng-disabled="status.loading"
                      ng-model="saveDialog.comment"></textarea>
          </div>
          <div class="alert error" ng-if="saveDialog.validationErrors" style="font-size: 14px; margin-top:20px">
            <div class="popup-error" style="font-size: 14px">
              <span class="glyphicon glyphicon-remove-circle"></span>
              <span translate="MODEL.VALIDATIONERRORS" translate-values="error"></span>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <div class="pull-right">
            <button class="btn btn-sm btn-default" ng-click="cancel()" ng-disabled="model.loading" translate>
              GENERAL.ACTION.CANCEL
            </button>
            <button class="btn btn-primary" ng-click="saveAndClose()"
                    ng-disabled="status.loading || !decisionTableForm.$valid || readOnly"
                    ng-show="!error && !error.isConflict" translate>ACTION.SAVE-AND-CLOSE
            </button>
            <button class="btn btn-primary" ng-click="save()"
                    ng-disabled="status.loading || !decisionTableForm.$valid || readOnly"
                    ng-show="!error && !error.isConflict" translate>ACTION.SAVE
            </button>
          </div>
          <div class="loading pull-right" ng-show="model.loading">
            <div class="l1"></div>
            <div class="l2"></div>
            <div class="l2"></div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
